<template>
  <div class='container'>
      <el-dialog title="分配角色" :visible="showRoleDialog" @close="btnCancel">
          <el-checkbox-group v-model="roleIds">
              <el-checkbox 
              v-for="item in checkList" 
              :key="item.id" 
              :label="item.id"
              >
              {{ item.name }}
              </el-checkbox>
          </el-checkbox-group>
          <el-row slot="footer" type="flex" justify="center">
              <el-col :span="6" >
                  <el-button size="small" type="primary" @click="btnOk">确定</el-button>
                  <el-button size="small" @click="btnCancel">取消</el-button>
              </el-col>
          </el-row>
      </el-dialog>
  </div>
</template>

<script>
import { getRoleList } from '@/api/setting'
import { assignRoles } from '@/api/employees'
import { getUserDetailById } from '@/api/user'
export default {
    props: {
        showRoleDialog: {
            type: Boolean ,
            default: false
        },
        userId: {
            type: String ,
            default: null
        }
    },
    data() {
        return {
            checkList:[],
            roleIds:[]
        }
    },
    created() {
        this.getRoleList()
    },
    methods: {
        async btnOk() {
            await assignRoles({
                id: this.userId,
                roleIds: this.roleIds
            })
            this.$emit('update:showRoleDialog',false)
            this.$message.success('设置成功')
        },
        btnCancel() {
            this.$emit('update:showRoleDialog',false)
        },
        async getRoleList() {
           const {rows} = await getRoleList()
           this.checkList = rows
        },
        async getUserDetailById(id) {
            const { roleIds } = await getUserDetailById(id)
            this.roleIds = roleIds
        }
    }
}
</script>

<style scoped lang='less'></style>